<template>
  <div>
     <div id="main" style="width: 400px;height:400px;"></div>
     <div>
       <button @click="type = 0">我是0</button>
       <button @click="type = 1">我是1</button>
        <button @click="type = 3">我是3</button>
     </div>
     <div>
        <i-circle :percent='type == 0 ? 80 : type == 1 ? 70 : 60'>
        <span class="demo-Circle-inner" style="font-size:24px">80%</span>
      </i-circle>
        <i-circle :percent="70">
        <span class="demo-Circle-inner" style="font-size:24px">70%</span>
      </i-circle>
        <i-circle :percent="60">
        <span class="demo-Circle-inner" style="font-size:24px">60%</span>
      </i-circle>
        <i-circle :percent="50">
        <span class="demo-Circle-inner" style="font-size:24px">50%</span>
      </i-circle>
     </div>
    <!-- <div v-if="type == 1">
        <i-circle :percent="50">
        <span class="demo-Circle-inner" style="font-size:24px">50%</span>
      </i-circle>
        <i-circle :percent="60">
        <span class="demo-Circle-inner" style="font-size:24px">60%</span>
      </i-circle>
        <i-circle :percent="70">
        <span class="demo-Circle-inner" style="font-size:24px">70%</span>
      </i-circle>
        <i-circle :percent="80">
        <span class="demo-Circle-inner" style="font-size:24px">80%</span>
      </i-circle>
     </div>
     <div v-if="type == 3">
        <i-circle :percent="80">
        <span class="demo-Circle-inner" style="font-size:24px">80%</span>
      </i-circle>
        <i-circle :percent="70">
        <span class="demo-Circle-inner" style="font-size:24px">70%</span>
      </i-circle>
        <i-circle :percent="60">
        <span class="demo-Circle-inner" style="font-size:24px">60%</span>
      </i-circle>
        <i-circle :percent="50">
        <span class="demo-Circle-inner" style="font-size:24px">50%</span>
      </i-circle>
     </div> -->
  </div>
</template>

<script>
import echarts from 'echarts'
  export default {
    name: 'welcome',
    components: {

      // Example
    },
    data () {
      return{
        time:'',
        timer:'',
        type:'0'

      }
    },

    mounted(){
       var myChart = echarts.init(document.getElementById('main'));

    var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
 myChart.setOption(option);

    },
    beforeRouteLeave (to, from, next) {
      this.$destroy();
      clearInterval(this.timer);
      next();
    },
    methods: {

    }
  }
</script>
<style lang="less" scoped >
  h1,h2{
    text-align: center;
    font-size:50px;
    margin-top:20px;
    font-weight:600
  }
  h2{
    font-size:40px;
  }
</style>
